<template>
  <m-box title="近七日产量" size="small" class="production-in-lastest">
    <top10Echart
      bar-name="当天产量"
      :loading="loading"
      :bar-width="30"
      :grid="grid"
      :labels="labels"
      :axisLabel="axisLabelConfig"
      :data="top7Data"
    />
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
import top10Echart from '@/views/WarehouseBoard/components/top10Echart/index.vue'

// 产量TOP7
const grid = ref({
  top: '30px',
  bottom: '30px',
  left: '60px',
  right: '20px'
})
const axisLabelConfig = ref({
  rotate: 15
})
const loading = ref(false)
const labels = ref(
  Array.from({ length: 7 }).map((_, i) => moment().subtract(i, 'day').format('YYYY-MM-DD'))
)
const top7Data = ref(Array.from({ length: 7 }).map((_, i) => 0))

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/getMOWeekDayReport')
    let _labels = []
    let _data = []
    res.ibiData.forEach((r) => {
      _labels.push(r.startWeekTime)
      _data.push(r.count)
    })
    labels.value = _labels
    top7Data.value = _data
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.production-in-lastest {
}
</style>
